<template>
  <div class="goodsCart">
    <van-nav-bar
      title="购物车"
      left-text="返回"
      left-arrow
      fixed
      @click-left="$router.go(-1)"
    />
    <div class="goods-list">
      <ul v-for="(item, i) in goodsList" :key="i">
        <li>
          <div class="goods-item">
            <div class="store-name">
              <div class="left-icon" @click="checkStore(item)">
                <i class="iconfont" :class=" item.flag ? 'icon-iconfontxuanzhong' : ''" />
              </div>
              <div class="store-text">{{item.shop_name}}</div>
              <i class="iconfont icon-gengduo"></i>
            </div>
            <div class="goods-shop" v-for="(citem, j) in item.shops" :key="j">
              <div class="left-icon" @click="checkGoods(item,citem)">
                <i class="iconfont" :class=" citem.flag ? 'icon-iconfontxuanzhong' : ''" />
              </div>
              <div class="shop-right">
                <div class="shop-img">
                  <img src="../../assets/logo.png" alt="">
                </div>
                <div class="shop-info">
                  <div class="shop-title">{{citem.shop_title}}</div>
                  <div class="shop-spces">这是商品的规格</div>
                  <div class="shop-contarl">
                    <div class="shop-price">￥{{citem.price}}</div>
                    <div>
                      <span class="reduce" @click="reduceNum(citem)">-</span><span class="shop-num">{{citem.num}}</span><span class="add" @click="addNum(citem)">+</span>
                    </div>
                  </div>  
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="jiesuan-nav">
      <div class="jiesuan-all" @click="toggleAll">
        <i class="iconfont" :class=" allChecked || comAllChecked ? 'icon-iconfontxuanzhong' : ''" />
      </div>
      <div class="jiesuan-right">
        <div class="total-money">
          选中{{countNum}}件，总计：{{countPrice}}
          <button>结算</button>
        </div>      
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      allChecked:false,
      goodsList:[
        {
          shop_name:'三棵树果店',
          shop_id:65,
          shops:[
            {goods_id:656,shop_title:'这是一个很好吃的苹果哦',price:39.00,num:1},
            {goods_id:452,shop_title:'梨子梨子哦，你可以买哦',price:50.00,num:2},
          ]
        },
        {
          shop_name:'小熊玩具店',
          shop_id:79, 
          shops:[{goods_id:333,shop_title:'白色的北极小熊，公仔玩具',price:110.00,num:1},]         
        }
      ]
    }
  },
  computed:{
    countNum(){
      let count_num = 0
      this.goodsList.forEach(i => {
        i.shops.forEach(j => {
          if(j.flag)count_num += j.num
        })
      })
      return count_num
    },
    countPrice(){
      let count_price = 0
      this.goodsList.forEach(i => {
        i.shops.forEach(j => {
          count_price += j.price*j.num
        })
      })
      return count_price
    },
    comAllChecked(){
      let storeNum = 0
      this.goodsList.forEach(i => {
        if(i.flag == true){
          storeNum++
        }else{
          storeNum--
        } 
      })
      if(this.goodsList.length == storeNum){
        return true 
      } else {
        return false
      }
    }
  },
  methods:{
    //增加商品数量
    addNum(item){
      this.goodsList.forEach(i => {
        i.shops.forEach(j => {
          if(j.goods_id === item.goods_id) j.num++
        })
      })
    },
    //减少商品数量
    reduceNum(item){
      this.goodsList.forEach(i => {
        i.shops.forEach(j => {
          if(j.goods_id === item.goods_id) {
            j.num--
            if(j.num<1){
              return j.num =1
            }
          } 
        })
      })
    },
    
    checkStore(item){
      //先判断按钮是否注册过
      if(typeof item.flag == 'undefined'){
        this.$set(item,"flag",true);
        //选中店铺然后选中全部商品
        item.shops.forEach(citem => {
          //判断商品是否注册过  
          if(typeof citem.flag == 'undefined'){
            this.$set(citem,"flag",true);
          }else{
            //有注册的,让他和父flag保持一致
            if(citem.flag == item.flag){
              citem.flag = item.flag
            }else{
              citem.flag = !citem.flag
            }
          }
        })
      }else{
        item.flag = !item.flag;
        item.shops.forEach(citem => {
          citem.flag = item.flag
        })
      }
    },
    //选择单件商品
    checkGoods(item, citem){
      if(typeof citem.flag == 'undefined'){
        this.$set(citem,"flag",true);
        //点击单件商品时遍历数组，如果数组都为flag都为true
        //设置父数组的flag为true,反之 
        //every每个都满足返回true
        let res = item.shops.every(i => {
          return i.flag == true
        })      
        if(res){
          if(typeof item.flag == 'undefined'){
            this.$set(item,"flag",true);
          }
        }
        
      }else{
        citem.flag = !citem.flag;
                //every每个都满足返回true
        let res = item.shops.some(i => {
          return i.flag == false
        })
        
        if(res){
          item.flag = false
        }else{
          item.flag = !item.flag
        }
        
      }
      
    },
    //选中全部商品
    toggleAll () {
      this.allChecked = !this.allChecked
      if(this.allChecked){
        this.goodsList.forEach(i => {
          //如果店铺没有注册flag
          if(typeof i.flag == 'undefined'){
            this.$set(i,"flag",true);
          }else{
            i.flag = true
          }
          //再遍历商品
          i.shops.forEach(j => {
            if(typeof j.flag == 'undefined'){
              this.$set(j,"flag",true);
            }else{
              j.flag = true
            }
          })
        })
      }else{
        this.goodsList.forEach(i => {
          //如果点击全选为false，则必然注册过
          i.flag = false
          //再遍历商品
          i.shops.forEach(j => {
            j.flag = false
          })
        })
      }
    }
  }
}
</script>
<style lang='less' scoped>
.icon-iconfontxuanzhong{
  margin: 0 auto;
  font-size: 23px;
  position: absolute;
  top: -3px;
  left: 0;
  color: #FF2F0B;
}
.goodsCart{
  background-color: #f7f7f7;
  height: 100%;
  padding: 60px 0;
}
.icon-gengduo{
  font-size: 18px;
}
.left-icon {
  text-align: center;
  position: relative;
  width: 20px;
  height: 20px;
  border-radius: 20px;
  border: 1px solid #EEEEEE;
}
.goods-list ul {
  margin-bottom: 10px;
}
.goods-list ul li {
  background-color: #fff;
  padding: 20px;
  .goods-item{
    .store-name{
      display: flex;
      align-items: center;
      .store-text{
        margin-left: 5px;
      }
    }
    .goods-shop{
      margin-top: 10px;
      display: flex;
      align-items: center;
      .shop-right{
        margin-left: 5px;
        flex: 1;
        display: flex;
        align-items: center;
        .shop-img{
          img{
            width: 80px;
            height: 80px;
          }
        }
        .shop-info{
          flex: 1;
          margin-left: 8px;
          font-size: 16px;
          .shop-spces{
            font-size: 12px;
            color: #c6c6c6;
          }
          .shop-contarl{
            display: flex;
            justify-content: space-between;
            .shop-price{
              color: red;
            }
            span{
              margin-right: 3px;
              padding: 2px 10px;
              background-color: #EEEEEE;  
            }
          }
        }
      }
    }
  }
}
.jiesuan-nav{
  padding: 0 20px;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  .jiesuan-all{
    position: relative;
    width: 20px;
    height: 20px;
    border-radius: 30px;
    border: 1px solid #EEEEEE;
    i{
      position: absolute;
      top: -20px;
    }
  }
  .jiesuan-right{
    flex: 1;
    margin-left: 10px;
    text-align: right;
    line-height: 60px;
    button{
      margin-left: 20px;
      height: 40px;
      line-height: 40px;
      width: 100px;
      border-radius: 20px;
      color: #fff;
      border: 1px solid transparent;
      background:linear-gradient(45deg,rgba(255,47,11,1) 0%,rgba(255,27,78,1) 100%);
    }
  }
}

</style>